<template>
	<view class="container">
		<view class="header" v-if="true">
			<view class="rolling-search">
				<text class="iconfont iconsousuo1"></text>
				<view class="hot-item">搜索分类</view>
			</view>
		</view>

		<view class="suggest-book">
			<view class="title">
				新书推荐
			</view>

			<view class="book">
				<image src="../../static/temp/cate4.jpg" class="book-image" mode=""></image>
				<p class="book-title">巴拉巴拉巴拉</p>
			</view>
			<view class="book">
				<image src="../../static/temp/cate4.jpg" class="book-image" mode=""></image>
				<p class="book-title">巴拉巴拉巴拉</p>
			</view>
			<view class="book">
				<image src="../../static/temp/cate4.jpg" class="book-image" mode=""></image>
				<p class="book-title">巴拉巴拉巴拉</p>
			</view>
			<view class="book">
				<image src="../../static/temp/cate4.jpg" class="book-image" mode=""></image>
				<p class="book-title">巴拉巴拉巴拉</p>
			</view>
			<view class="book">
				<image src="../../static/temp/cate4.jpg" class="book-image" mode=""></image>
				<p class="book-title">巴拉巴拉巴拉</p>
			</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import notice from "@/components/notice"
	import tabbar from "@/components/tabbar"
	import $scss from "@/uni.scss"
	export default {
		components: {
			tabbar,
			notice,
		},
		data() {
			return {
				$scss,
				title: "首页",
				scrollTop: 0,
				notify: '',
				cateList: [],
				exChainList: [

				],
			};
		},
		onLoad() {
			this.getCategoryList()
			this.getExChainListList()
		},
		methods: {
			async getCategoryList() {
				// uni.request({
				// 	url: "cate/list/any?level=1",
				// 	header: {
				// 		"Content-Type": "application/json"
				// 	},
				// 	success: (res) => {
				// 		if (res.data.code == 0) {
				// 			this.cateList = res.data.data
				// 		}
				// 	}
				// })
			},
			// 外链
			async getExChainListList() {
				// uni.request({
				// 	url: "exchain/list",
				// 	header: {
				// 		"content-type": "application/json"
				// 	},
				// 	success: (res) => {
				// 		if (res.data.code == 0) {
				// 			this.exChainList = res.data.data
				// 		}
				// 	}
				// })
			},
			toExChain(src) {
				console.log(11);
				uni.navigateTo({
					url: "/pages/exChain/exChain?src=" + src
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding-bottom: 100rpx;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		width: auto;
		color: #fff;
	}

	movable-area {
		height: 140rpx;
		width: 100%;
		background-color: #fff;
		overflow: hidden;
	}

	.max {
		width: 500rpx;
		height: 500rpx;
	}

	.container {
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.header {
		height: 120rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: $themeColor;
	}

	.rolling-search {
		width: 100%;
		height: 75rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.rolling-search text {
		font-size: 28rpx;
	}

	.suggest-book {
		width: 98%;
		margin: 0 auto;

		background-color: #fff;

		.book {
			.book-image {
				border: 1px solid;
				width: 120px;
				height: 160px;
			}

			.book-title {
				max-width: 120px;
				word-wrap: break-word;
				font-size: 12px;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>